<template>
  <view class="demo-cnt">
    <view>{{ name }}</view>
    <view>
      <u-upload></u-upload>
    </view>
    <u-cell-group title="路由(同小程序)">
      <view class="demo-button">
        <button class="primary" @click="navigateTo">navigateTo</button>
        <button class="primary" @click="switchTab">switchTab(底部导航使用这个)</button>
      </view>
    </u-cell-group>

    <u-cell-group title="登录和授权">
      <view class="demo-button">
        <button class="primary" @click="toLogin">去登录</button>
        <button class="primary" @click="isLogin">是否已登录</button>
        <button class="primary" @click="loginOut">退出登录</button>
      </view>
    </u-cell-group>
    <!-- 自研APP相关功能等app开发完成再做接入 -->
    <u-cell-group title="JSSDK(主要是小程序和浙里办环境,纯h5暂不做考虑)">
      <view class="demo-button">
        <block v-if="!isH5">
          <button class="primary" @click="payWechat" v-if="isWechat">微信支付</button>
          <button class="primary" @click="payAlipay" v-else-if="isAlipay">支付宝支付</button>
          <button class="primary" @click="payBaidu" v-else-if="isBaidu">百度收银台</button>
          <button class="primary" @click="payZlb" v-else-if="isZlbEnv">浙里办支付</button>
          <button class="primary" @click="getLocation">获取定位</button>
          <button class="primary" @click="chooseLocation">地图选点</button>
          <button class="primary" @click="scan">扫码</button>
        </block>
        <a-openmap :address="address">
          <!-- 自定义样式和内容 -->
          <button class="primary">地图导航</button>
        </a-openmap>
        <button class="primary" @click="makePhoneCall('18055555555')">打电话</button>
      </view>
    </u-cell-group>

    <u-cell-group title="接口" class="button-mb">
      <view class="demo-button">
        <button class="primary" @click="getCat">get请求</button>
      </view>
    </u-cell-group>

    <u-cell-group title="UI" class="button-mb">
      <view class="demo-button">
        <button class="primary large block">登录按钮，大一点</button>
        <button class="primary">默认按钮</button>
        <button class="warn">警告按钮</button>
        <button class="default">白色按钮</button>
        <button class="primary plain">蓝色线框按钮</button>
        <button class="primary mini">小按钮</button>
        <button class="primary mini plain">小按钮</button>
        <button class="primary block">按钮 block</button>
      </view>
    </u-cell-group>

    <u-cell-group title="文件上传" class="button-mb">
      <!-- v-model 绑定，或者 change 获取 -->
      <!--
        参数
        multiple<boolean> 多选
        maxCount<number> 最大数量
        maxSize<number> 限制大小
        accept<string> 文件类型 all | media | image | file | video
      -->
      <text>图片上传</text>
      <a-upload v-model="img" @change="getURL" />
      <text>视频上传</text>
      <a-upload accept="video" @change="getURL" />
    </u-cell-group>

  </view>
</template>

<script>
import { getCat } from '@/api/demo';
import { payOrder } from '@/utils/pay.js';
import { makePhoneCall, scan, chooseLocation, isLogin, getLocation } from '@/utils/jssdk';
import { isWechat, isAlipay, isBaidu, isZlbEnv, isMini, isH5 } from '@/utils/plantForm';
import { mapState } from 'vuex';

export default {
  data() {
    return {
      title: 'Hello',
      isWechat,
      isAlipay,
      isBaidu,
      isZlbEnv,
      isMini,
      isH5,
      address: {
        // 传百度坐标，项目所有坐标都用百度
        lng: 121.560475, // 必填
        lat: 29.875832, // 必填
        name: '天一广场',
        address: '浙江省宁波市海曙区中山东路188号'
      },
      // 多张图,逗号隔开
      img: ''
    };
  },
  computed: {
    ...mapState({
      name: state => state.user.name
    })
  },
  onLoad() {
    setTimeout(() => {
      this.img = 'http://www.hugoooo.com/static/83b61db7e080464b955023baefaa53eb.jpeg';
    }, 3000);
    console.log(this.$store);
  },
  methods: {
    navigateTo() {
      uni.navigateTo({
        url: '/pages/demo2/demo2?id=881892182'
      });
    },
    switchTab() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    },
    toLogin() {
      uni.navigateTo({
        url: '/pages/login/login'
      });
    },
    isLogin() {
      const logined = isLogin();
      if (!logined) {
        uni.showModal({
          content: '未登录，请登录'
        });
      } else {
        uni.showModal({
          content: `已登录！${JSON.stringify(logined)}`
        });
      }
    },
    loginOut() {
      uni.clearStorageSync();
      uni.showModal({
        content: '清除登录信息成功！'
      });
    },
    getLocation() {
      getLocation().then(res => {
        // 地址信息 统一使用 address
        uni.showModal({
          content: JSON.stringify(res)
        });
      }).catch(err => {
        console.log(err);
      });
    },
    // 支付宝支付 只需要传入交易号，后端返回
    payAlipay() {
    /* res 返回值
    /* resultCode：
      4 无权限调用（N22104）。
      9000 订单处理成功。
      8000 正在处理中。支付结果未知（有可能已经支付成功）。
      4000 订单处理失败。
      6001 用户中途取消。
      6002 网络连接出错。
      6004 处理结果未知（有可能已经成功）。
     * memo 即 操作提示
    * errMsg
    */
      payOrder('12d12a12').then(res => {
        console.log(res);
      }).catch(err => {
        console.log(err);
      });
    },
    payBaidu() {
    // 后端返回参数，没接过，自己调试
      payOrder({
        orderInfo: {
          dealId: 1,
          appKey: 11,
          totalAmount: 1,
          tpOrderId: 1,
          dealTitle: '1',
          signFieldsRange: '123',
          rsaSign: '1'
        }

      }).then(res => {
        console.log(res);
      }).catch(err => {
        console.log(err);
      });
    },
    payZlb() {
    // 浙里办支付用的是 唤起支付宝App支付
    // 具体看接口，没接过
      payOrder('12d12a12').then(res => {
        console.log(res);
      }).catch(err => {
        console.log(err);
      });
    },
    // 微信支付
    payWechat() {
    // 后端返回数据格式如下 模拟后端返回数据
      const order = {
        timeStamp: String(new Date().getTime()),
        nonceStr: '123',
        package: 'prepay_id=A12500',
        signType: 'MD5', // 可前端写死
        paySign: '123'
      };
      // 回调参数 未知
      payOrder(order).then(res => {
        console.log(res);
      }).catch(err => {
        console.log(err);
      });
    },
    scan() {
      scan().then(res => {
        uni.showModal({
          content: res
        });
      });
    },
    makePhoneCall(phone) {
      makePhoneCall(phone);
    },
    chooseLocation() {
      chooseLocation().then(res => {
        /**
      * address
       latitude: 29.859338
       longitude: 121.550334
       name
      * */
        uni.showModal({
          content: JSON.stringify(res)
        });
      }).catch(err => {
        uni.showModal({
          content: err
        });
      });
    },
    getURL(url) {
      console.log(url);
      setTimeout(() => {
        console.log(this.img);
      }, 1000);
    },
    getCat() {
      getCat().then(res => {
        console.log(res);
        uni.showModal({
          content: JSON.stringify(res),
          showCancel: false
        });
      });
    }
  }
};
</script>

<style lang="scss">
 .demo-cnt {
  padding: 12rpx 20rpx;
  background-color: #fff;
  .flex {
   display: flex;
   flex-wrap: wrap;
  }
  .demo-button {
   margin: 8rpx;
   button {
    margin: 8rpx;
   }
  }
  button {
   margin-bottom: 12px;
  }
 }

</style>
